<!--
  组件名称：自定义仪表
 -->
<template>
  <!--这里是假数据-->
  <div class="aside-main">
    <el-row :gutter="20" style="line-height:40px;border-bottom: 1px solid #00d9e7;">
      <el-col :span="6" ><div class="real-time-title">{{title}}</div></el-col>
      <el-col :span="6" style="padding:0px;"><div class="real-time monitoring">{{subhead}}</div></el-col>
      <el-col :span="6" style="padding:0px;"><div class="real-time monitoring">&nbsp;</div></el-col>
      <el-col :span="6" style="padding:0px;"><div class="real-time monitoring">2018.04.03  09:00</div></el-col>
    </el-row>
    <el-row :gutter="20" style="line-height:60px;width:100%">
      <!-- 循环第一次遍历全部要显示的值 -->
      <span v-for="col in dddd" :key="col['key']">
        <!-- 循环第二次分别处理要显示的字段的名称和值 -->
        <el-col :span="4" v-for="(val,key) in col" :key="val">
          <!-- 这里处理样式键值的样式 -->
          <div style="width:900px" :class="{monitoring1:(key=='name'),'monitoring1-data':(key=='key')}" :style="key=='key'?col.style():{}">{{key=='name'?val:data[val]}}</div>
        </el-col>
      </span>
      <el-col v-if="dddd.length<3" :span="4"><div class="monitoring1">&nbsp;&nbsp;&nbsp;</div></el-col>
      <el-col v-if="dddd.length<3" :span="4"><div class="monitoring1-data">&nbsp;&nbsp;&nbsp;</div></el-col>
      <el-col v-if="dddd.length<2" :span="4"><div class="monitoring1">&nbsp;&nbsp;&nbsp;</div></el-col>
      <el-col v-if="dddd.length<2" :span="4"><div class="monitoring1-data">&nbsp;&nbsp;&nbsp;</div></el-col>
      <el-col v-if="dddd.length<1" :span="4"><div class="monitoring1">&nbsp;&nbsp;&nbsp;</div></el-col>
      <el-col v-if="dddd.length<1" :span="4"><div class="monitoring1-data">&nbsp;&nbsp;&nbsp;</div></el-col>
    </el-row>
      <el-row :gutter="20" style="line-height:40px;">
      <el-col :span="8"><div class="monitoring1">保证水位(m):</div></el-col>
      <el-col :span="8"><div class="monitoring1">警戒水位(m):</div></el-col>
      <el-col :span="8"><div class="monitoring1">设防水位(m):</div></el-col>
    </el-row>
    <el-row :gutter="20" style="line-height:40px;">
      <el-col :span="8"><div class="circular">21.45</div></el-col>
      <el-col :span="8"><div class="circular">23.55</div></el-col>
      <el-col :span="8"><div class="circular">25.61</div></el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'CustomInstrument',
  data () {
    return {
      data: {
        flow: 123,
        flow2: 321
      },
      dddd: [
        {name: '流量',
          key: 'flow',
          style (value) {
            if (value > 123) {
              return {color: 'red'}
            }
            return {color: '#fff'}
          }},
        {name: '流量2',
          key: 'flow2',
          style (value) {
            if (value > 123) {
              return {color: 'red'}
            }
            return {color: '#fff'}
          }}
      ]
    }
  },
  components: {},
  methods: {},
  props: [
    // 数据
    // "data",
    // 仪表数据键（不要超过三个）数据结构[{name：'流量', key: 'flow'}]
    'instrumentKeys',
    // 要显示数据u键（不要超过三个）数据结构[{name：'流量', key: 'flow'}]
    'showKeys',
    // 大标题
    'title',
    // 小标题
    'subhead']
}
</script>
<style scoped>
  .aside-main {
    background-color: #ffffff00;
    float: left;
    padding: 20px 0px;
  }

  .aside-table .warning {
    color: red;
    font-weight:bold;
  }

  .aside-main[data-v-bb3e6dc6]{
    background-color: transparent;
  }
  .real-time{
    color:#00d9e7;
    font-size: 14px;
  }
  .real-time-title{
  font-size: 18px;
  font-weight: bold;
  color:#00d9e7;
  }
  .monitoring1{
  color:#fff;
  font-size: 14px;
  width:100px;
  }
  .monitoring1-data{
  color:red;
  font-weight: bold;
  font-size: 14px;
  padding-left:0px;
  }
  .circular{
  width:90px;
  height:90px;
  border-radius: 50%;
  border:6px solid #00d8e7;
  color:#00d8e7;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  line-height: 90px;
  }
</style>
